import React from 'react'
import axios from 'axios'
import utils  from '../../utils/utils'
import { Card, Table, Modal, Button, Message } from 'antd';


class baseTable extends React.Component {
    state = {
        data: []
    }
    params = {
        page: 1
    }


    componentDidMount() {
        //设置数据源
        const dataSource = [{
            id: 1,
            name: '程香香',
            sex: '女',
            statu: 1,
            married: '未婚',
            hobby: 5,
            birthday: '05-09',
            address: '蚌埠市蚌埠学院',
            time: '2018-11-02'

        }]
        // 为表遍历加唯一的key值
        dataSource.map((item, index)=> {
            return item.key = index
        })

        this.setState({
            data: dataSource
        })
        this.request()
    }

    //2.动态获取数据
    request = () => {

        let _this = this
        let loading;
        loading = document.getElementById('ajaxLoading');
        loading.style.display = 'block';

        const url = 'https://www.easy-mock.com/mock/5bdc5b99f3dd6975f8bc732b/immocapi'
        axios(url + '/table/list')
            .then((res) => {
                //动态添加key 
                res.data.result.list.map((item, index)=> {
                    return item.key = index;
                })
                if (res.data && res.data.isShowLoading !== false) {
                    loading = document.getElementById('ajaxLoading');
                    loading.style.display = 'none';
                }
                if (res.status == '200' && res.data.code == 0) {
                    this.setState({
                        data2: res.data.result.list,
                        selectRowKeys: [],
                        selectedRows: null,
                        // 分页
                        // pagination: utils.pagination(res, (current) => {
                        //     // _this.params.page = current;
                        //     // this.request()
                        // })
                    })
                }
            })
            .catch((err) => {
                Modal.info({
                    title: '提示',
                    content: err
                })
            });

    }

    //3.获取一行上的数据
    onRowClick =(record, index) => {
        let selectKey = [index];
        // Modal.info({
        //     title: '信息',
        //     content: `用户名${record.name}, 联系地址${record.address}`
        // })
        this.setState({
            selectRowKeys: selectKey,
            selectedItem: record
        })

    }

    //5.删除选中的复选框
    handleDelete = () => {
        //获取对应的id
        let rows = this.state.selectedRows
        let ids = [];
        rows.map((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title: '删除提示',
            content: `您确定要删除这些数据吗 ${ids.join(',')} `,
            onOk: ()=> {
                Message.success('删除成功');
                this.request()
            }
        })
    }
    render() {
        const columns = [{
            title: 'id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '用户名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render(sex) {
                return sex == 1 ? '男' : '女'
            }
        },
        {
            title: '状态',
            dataIndex: 'statu',
            key: 'statu',
            render(statu) {
                let config = {
                    '1': '咸鱼一条',
                    '2': '婳婳的书',
                    '3': '风华浪子',
                    '4': '明天就好',
                    '5': '创业者'
                }
                return config[statu];
            }
        },
        {
            title: '婚否',
            dataIndex: 'married',
            key: 'married'
        },
        {
            title: '爱好',
            dataIndex: 'hobby',
            key: 'hobby',
            render(hobby) {
                let config = {
                    '1': '钢琴',
                    '2': '瑜伽',
                    '3': '睡觉',
                    '4': '看小说',
                    '5': '摄影'
                }
                return config[hobby];
            }
        },
        {
            title: '生日',
            dataIndex: 'birthday',
            key: 'birthday'
        },
        {
            title: '联系地址',
            dataIndex: 'address',
            key: 'address'
        },
        {
            title: '早起时间',
            dataIndex: 'time',
            key: 'time'
        }

        ]
         //4.配置表格单选和复选框
         const {selectRowKeys} = this.state;
         // 第二种写法  const selectRowKeys = this.state.selectRowKeys;
         const rowSelection = {
             type: 'radio',
             selectRowKeys
         }
         //复选框
         const rowCheckSelection = {
             type: 'checkbox',
             selectRowKeys,
             onChange: (selectRowKeys, selectedRows)=>{
                 this.setState({
                     selectRowKeys,
                     selectedRows
                 })
             }
         }


        return (
            <div>
                <Card title="基础表格" className="warp">
                    <Table
                        // 是否加边框
                        bordered
                        //是否需要分页器 Object
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.data} />

                </Card>
                <Card title="Mock表格 请求接口动态获取数据" className="warp">
                    <Table
                        columns={columns}
                        dataSource={this.state.data2} />
                </Card>
                <Card title="Mock表格 添加单选按钮" className="warp">
                    <Table
                        // 表格行是否可选择object  配置项 type	多选/单选，checkbox or radio
                        rowSelection={rowSelection}	
                        // 选中一行
                        onRow={(record, index) => {
                            return {
                                onClick: ()=>{
                                    this.onRowClick(record,index)
                                }
                            }
                        }}
                        columns={columns}
                        dataSource={this.state.data2} />
                </Card>
                <Card title="Mock表格 添加复选框" className="warp">
                <Button onClick={this.handleDelete}>删除</Button>
                    <Table
                        // 表格行是否可选择object  配置项 type	多选/单选，checkbox or radio
                        rowSelection={rowCheckSelection}	
                        columns={columns}
                        dataSource={this.state.data2} />
                </Card>
                <Card title="Mock 表格分页" className="warp">
                    <Table
                        columns={columns}
                        dataSource={this.state.data2}
                        pagination={this.state.pagination} 
                        />
                        
                </Card>
            </div>
        )
    }
}


export default baseTable